CSS Advance Background

    In this CSS tutorial, we will be going to discuss the CSS background properties in deep. And we will also be covering all the other properties associated with the background of the element.

    Set Multiple Background

    We know that we can set an image as a background for our element using the background-image property. But using the same property, we can set multiple images as a background for the element.

    Syntax 

    background-image: url(image1) , url(image2)

    The images url() must be separated with a comma. The browser will stack image 1 over image 2, if you do not want one image to stack over another then you can use the background-position property to set images positions.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #mul_images {
              background-image: url(img_1.jpg), url(img_2.png);
              background-position: right bottom, left top;
              background-repeat: no-repeat, repeat;
              padding: 15px;
            }
        </style>
    </head>
<body>
<div id="mul_images">
  <h1>CSS Tutorial</h1>
  <p>This CSS Tutorial is all about background property.</p>
  <p>And this specific example define how can we use background-image property to set multiple images as a background</p>
</div>
</body>
</html>

    Note : The above same example can be performed using the shorthand background property 

    #mul_images{background: url(img_1.jpg) right bottom no-repeat, url(img_2.png) left top repeat;}

    CSS Background Size

    If the size of the background is too large for the element box model then using the background-size property we can set the size of the background image, and make it fit according to the element box model. The background-size property accepts value in length and percentage unit or we can either use two reserved keywords contain or cover . The contain value will scale the image up to its full content so it could fit as the complete background. But if the image is too small then according to the elements box model then it will not cover the complete background. The cover value will scale and stretch the image so it can cover the complete background of the element.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #example {
              background-image: url(img.png);
              background-size: cover;
              background-repeat: no-repeat;
              padding: 15px;
            }
        </style>
    </head>
<body>
<div id="example">
  <h1>CSS Tutorial</h1>
  <p>This CSS Tutorial is all about background property.</p>
  <p>And this specific example define how can we use background-size property to set background image Size.</p>
</div>
</body>
</html>

    Background Size of Multiple Background Images

    If an element has multiple images as a background then the size of an individual image can be specified using the background-size property. The sizes must be mentioned in the same order separated with a comma as they specified in the background-image.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #example {
              background-image: url(img_1.png), url(img_2.jpg);
              background-size: 50%, 50%;
              background-position: left, right;
              background-repeat: no-repeat;
              padding: 15px;
            }
        </style>
    </head>
<body>
<div id="example">
  <h1>CSS Tutorial</h1>
  <p>This CSS Tutorial is all about background property.</p>
  <p>And this specific example define how can we use background-size property to set background images Size.</p>
</div>
</body>
</html>

    CSS background-origin property

    The background-origin property defines the position of the background image and it accepts only three values.

    • border-box positioned the background image from the upper left corner border.
    • padding-box is the default value for the background-origin property and it positioned the background image from the upper left corner of the padding edge.
    • content-box positioned the image from the upper left corner of the content.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #example {
              background-image: url(gradian_blue.png);
              background-size: cover;
              background-repeat: no-repeat;
              background-origin: content-box;
              border:2px solid black;
              padding: 15px;
            }
        </style>
    </head>
<body>
<div id="example">
  <h1>CSS Tutorial</h1>
  <p>This CSS Tutorial is all about background property.</p>
  <p>And this specific example define how can we use background-origin property to positioned the background image.</p>
</div>
</body>
</html>

    CSS background-clip property

    The background-clip property defines which part of the element box should be painted by the background-color . It accepts 3 values

    • border-box is the default value for the border-clip property and it paints the complete element background with the background color, including the outside edges of the border.
    • padding-box property paint only the element content and the outside edges of the padding.
    • content-box paint only the content area of the element.

    Example 

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #example {
              background-color: yellow;
              background-clip: content-box;
              border:2px solid black;
              padding: 15px;
            }
        </style>
    </head>
<body>

<div id="example">
  <h1>CSS Tutorial</h1>
  <p>This CSS Tutorial is all about background property.</p>
  <p>And this specific example define how can we use background-clip to set the background colour only for the element content. </p>
</div>
</body>
</html>

    Summary

    • The background property is a shorthand property for its all the sub background properties such as background-image, background-color, background-size, etc.
    • The background-clip defines the painting area of the background color.
    • The background-origin define the position area of the background image
    • The background-size can manipulate the size of the background images.
    Previous Tutorial Next Tutorial